<template>
  <div>
    <el-form ref="mainForm" size="medium" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="作物名称" prop="name">
        <el-input v-model="formData.name" placeholder="名称" clearable />
      </el-form-item>
      <el-form-item label="作物图片">
        <img-upload
          name="project"
          :image-url="imageUrl"
          @onSuccess="onSuccess"
          @beforeUpload="beforeUpload"
        />
      </el-form-item>
      <el-form-item label="描述" prop="descri">
        <el-input v-model="formData.descri" rows="4" placeholder="描述" type="textarea" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
        <el-button @click="reset('mainForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="选择所在位置"
      :visible.sync="dialogVisible"
      modal-append-to-body
      append-to-body
      fullscreen
    >
      <location ref="mark" :map-data="mapData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setPoi">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgUpload from '@/components/ImgUpload'
import Location from '@/components/Location'
import UploadMixin from '@/mixin/UploadMixin'
export default {
  components: {
    ImgUpload,
    Location
  },
  mixins: [UploadMixin],
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      mapData: {
        center: [39.460508, 115.851289],
        zoom: 18
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        const center = [this.formData.lat, this.formData.lng]
        this.formData.latlng = center.join(',')
        this.mapData.center = center
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = {
            serialno: this.formData.serialno,
            name: this.formData.name,
            picture: this.formData.picture,
            lat: this.formData.lat,
            lng: this.formData.lng,
            descri: this.formData.descri
          }
          this.$emit('submit', formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    },
    openPoiContainer() {
      this.dialogVisible = true
    },
    setPoi() {
      const gps = this.$refs.mark.getLocation()

      this.formData.lat = gps.lat.toFixed(6)
      this.formData.lng = gps.lng.toFixed(7)
      this.formData.center = [this.formData.lat, this.formData.lng]
      this.formData.latlng = this.formData.center.join(',')

      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
